前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 结束语

欢迎同学们历经千辛万苦,终于来到了最后一章。这一章,我们将串联起前面所学的知识点,和 Jenkins + Nexus 做一套流程的集成。

在这里,我准备了一套简单的增删改查项目。前端技术栈为 React + craco ,后端技术栈为 MySQL + eggjs 。

让我们直接开始吧!

# 操作步骤

在开始之前,我们需要在 Kubernetes 集群内再加一台 Node ,起名为 node2 。具体流程请参考之前的章节。 Node2 的主要用途是用于部署 MySQL 使用。

# 1. 项目仓库

先来看下这次项目部署所需要的仓库: gitee.com/organizatio…。 其中,k8s-demo-frontend 是前端项目,k8s-demo-backend 是后端项目。

# 2. 构建 & 部署前端应用

第一步我们先部署前端应用,先将前端跑起来。

我们前往 Jenkins ,新建一个任务,起名为 demo-frontend 。接着配置任务的Git代码源,让 Jenkins 可以拉取代码。因为我们目前是公开项目,所以还不需要配置私有仓库认证。

按照之前的方式,勾选 构建环境 => Provide Node & npm bin/ folder to PATH 选项,给你执行的任务增加 Nodejs 运行环境

继续添加构建脚本,让 Jenkins 构建镜像。找到 构建 => 添加构建步骤 => Excute Shell ,填写以下脚本:

脚本首先使用 npm run build 对代码进行编译打包,随后使用 docker build 命令构建镜像。最后推送镜像到镜像库内。

#!/bin/sh -l

time=$(date "+%Y%m%d%H%M%S")
npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t 172.16.81.7:8082/frontend-app:$time .
docker login -u $DOCKER_LOGIN_USERNAME -p $DOCKER_LOGIN_PASSWORD 172.16.81.7:8082
docker push 172.16.81.7:8082/frontend-app:$time
@前端进阶之旅: 代码已经复制到剪贴板

因为推送镜像需要 docker login ,我们还需要在 Jenkins 端配置下 docker 登录信息。配置文件方式如下图,和之前的章节无异。

保存后执行,即可生成前端镜像。

镜像生成后,我们还需要去k8s集群内部署下这个镜像。

前往集群节点,新建一个文件。叫做 demo-frontend.yaml ,输入以下内容。镜像地址换成刚才 Jenkins 构建后的镜像地址。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: demo-frontend
spec:
  selector:
    matchLabels:
      app: demo-frontend
  replicas: 1
  template:
    metadata:
      labels:
        app: demo-frontend
    spec:
      imagePullSecrets:
      - name: private-registry
      containers:
      - name: frontend-app
        imagePullPolicy: Always
        image: 172.16.81.7:8082/frontend-app:20210117162137
        ports:
       	- containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: demo-frontend-service
spec:
  selector:
    app: demo-frontend
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: NodePort
@前端进阶之旅: 代码已经复制到剪贴板

保存后退出,使用 kubectl apply 命令部署前端服务。部署完毕后,使用 kubectl get svc 命令来获取下服务的端口。 image.png 可以看到,此时前端已经部署成功了。使用浏览器打开即可看到页面。

# 3. 部署 & 初始化MySQL

我们在开头时,添加了一台全新的 Node 节点,这台节点机器用于部署MySQL服务。我们可以给节点加污点,让除了特定的服务,其他服务都不可以部署上去。

这里添加一条污点, key 等于 MySQL ,

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏